<template>
	<div >
		<el-container class="container" >
			<el-container>
				<h1>物流查询系统</h1>
				<el-header class="header" >
					<div class="mes">
						<img class="nameImg" align="absmiddle" src="./assets/a2.jpg" />
						<span>王小虎</span>
					</div>
				</el-header>
				<div class="relative">
					<el-button v-popover:popover4 class="add" type="primary" size="">新增</el-button>
					
				</div>
				<el-main class="section">
					<el-table :data="computedPage" stripe >
					    <el-table-column align="center" prop="sendername" label="姓名" width="140" > -->
						</el-table-column> 
						<el-table-column align="center" prop="sendermobile" label="联系方式" width="120">
						</el-table-column>
						<el-table-column align="center" prop="sendaddr" label="地址">
						</el-table-column>
						<el-table-column align="center" fixed="right" label="操作" width="100">
							<template slot-scope="props">
								<el-popover placement="left" width="400" trigger="click" class="alertBox"  >
									<el-form disabled label-width="100px" >
										<h2>货件信息:</h2>
												<el-form-item label="寄件人 :">
													<el-input v-model="props.row.sendername" ></el-input>
												</el-form-item>
												<el-form-item label="联系电话 :" >
													<el-input v-model="props.row.sendermobile"></el-input>
												</el-form-item>
												<el-form-item label="寄件地址 :" >
													<el-input v-model="props.row.sendaddr"></el-input>
												</el-form-item>
												<el-form-item label="托运日期 :" >
													<el-input v-model="props.row.consigndate"></el-input>
												</el-form-item>
												<el-form-item label="期望送达时间" >
													<el-input v-model="props.row.wanttime"></el-input>
												</el-form-item>
												<el-form-item label="收件人" >
													<el-input v-model="props.row.consignee"></el-input>
												</el-form-item>
												<el-form-item label="收件地址" >
													<el-input v-model="props.row.conaddr"></el-input>
												</el-form-item>
												<el-form-item label="联系电话" >
													<el-input v-model="props.row.conmobile"></el-input>
												</el-form-item>
												<el-form-item label="提货方式" >
													<el-input v-model="props.row.pickup"></el-input>
												</el-form-item>
												<el-form-item label="货物名称" >
													<el-input v-model="props.row.name"></el-input>
												</el-form-item>
												<el-form-item label="件数" >
													<el-input v-model="props.row.amount"></el-input>
												</el-form-item>
												<el-form-item label="货物规格" >
													<el-input 
													:placeholder="props.row.length+' x '+props.row.width+' x '+props.row.height"></el-input>
												</el-form-item>
												<el-form-item label="重量" >
													<el-input v-model="props.row.weight"></el-input>
												</el-form-item>
												<el-form-item label="货物描述" >
													<el-input v-model="props.row.description"></el-input>
												</el-form-item>
									</el-form>
									<el-button slot="reference" type="text" size="small">查看</el-button>

								</el-popover> 
							</template>
						</el-table-column>
					</el-table>
					 
					<div  class="block">
						<el-pagination 
							 @size-change="handleSizeChange"
						     @current-change="handleCurrentChange"
							:current-page="currentPageNum" 
							:page-sizes="[6, 12, 24, 48]" 
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" 
							:total="total" 
						    :background="true">
						</el-pagination>
					</div>
				</el-main>
				
			</el-container>
		</el-container>

		<el-popover ref="popover4" placement="left" width="800" trigger="click" class="alertBox">
			<el-form label-width="110px" :model="addData" :rules="rules" ref="add" >
				<h2>新增</h2>
				<el-button type="text " icon="el-icon-circle-close-outline" circle style="position:absolute;
    			left: 93%;top: 1%;" @click.native="closeForm"></el-button>
				<el-row :gutter="20">
					<el-col :span="12">

						<el-form-item label="寄件人" prop="sendername">
							<el-input v-model="addData.sendername"></el-input>
						</el-form-item>
						<el-form-item label="联系电话" prop="sendermobile">
							<el-input v-model="addData.sendermobile" maxlength="11" minlength="11"></el-input>
						</el-form-item>
							<!-- <v-distpicker v-model="sendaddress" @selected="sendAddress"></v-distpicker> -->
						<el-form-item label="寄件地址" prop="sendaddr">
							<v-distpicker v-model="sendaddress" @selected="sendAddress"></v-distpicker>
							<el-input v-model="addData.sendaddr" placeholder="请输入详细地址"></el-input>
						</el-form-item>
						<!-- <el-form-item label="托运时间" required>
							<el-date-picker v-model="addData.consigndate" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">
							</el-date-picker>
						</el-form-item> -->
						<el-form-item prop="consigndate" label="托运时间" >
							<el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions1" v-model="addData.consigndate" style="width: 100%;" :editable=false ></el-date-picker>
						</el-form-item>
						<el-form-item label="件数" prop="amount">
							<el-input-number v-model="addData.amount"  :min="1" :max="50" label="描述文字"></el-input-number>
						</el-form-item>
						<el-form-item label="提货方式">
							<el-radio-group v-model="addData.formPickup">
							<el-radio label="1" >自提</el-radio>
							<el-radio label="2" >配送</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="重量" prop="weight">
							<el-input v-model="addData.weight" style="width:30%"></el-input>Kg(公斤)
						</el-form-item>
						<el-form-item label="货物名称" prop="name">
							<el-input v-model="addData.name" placeholder="请填写货物名称"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="12">
						<el-form-item label="收件人" prop="consignee">
							<el-input v-model="addData.consignee"></el-input>
						</el-form-item>
						<el-form-item label="联系电话" prop="conmobile">
							<el-input v-model="addData.conmobile" maxlength="11" minlength="11"></el-input>
						</el-form-item>
						<el-form-item label="收件地址" prop="conaddr">
							<v-distpicker v-model="conaddress" @selected="conAddress"></v-distpicker>
							<el-input v-model="addData.conaddr" placeholder="请输入详细地址"></el-input>

						</el-form-item>
						<!-- <el-form-item label="期望送达时间">
							<el-date-picker v-model="addData.wanttime " align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">
							</el-date-picker>
						</el-form-item> -->
						<el-form-item prop="wanttime" label="期望送达时间" >
							<el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions1"v-model="addData.wanttime" style="width: 100%;"></el-date-picker>
						</el-form-item>
						
						<el-form-item label="货物规格" prop="length">
							长:<el-input v-model="addData.length"  style="width:30%;margin:0 2%"></el-input>米
						</el-form-item>
						<el-form-item label="" prop="width">
							宽:<el-input v-model="addData.width"  style="width:30%;margin:0 2%"></el-input>米
						</el-form-item>
						<el-form-item label="" prop="height">
							高:<el-input v-model="addData.height"  style="width:30%;margin:0 2%"></el-input>米
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="货物描述" prop="description">
					<el-input type="textarea" v-model="addData.description"></el-input>
				</el-form-item>
				<el-form-item style="text-align:center" label-width="0">
					<el-button type="primary" @click.native="submitForm()">提交</el-button>
					<el-button @click="resetForm()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-popover>

	</div>
</template>

<script>
	import VDistpicker from 'v-distpicker'
	export default {
		components: {
			VDistpicker
		},
		computed: {
			computedPage() {
//				return this.showData;
				var start=this.pageSize * (this.currentPageNum - 1);
				var end=this.pageSize * this.currentPageNum;
				console.log(start+'--'+end)
				return this.showData.slice(start,end);
//					return index >= this.pageSize * (this.currentPageNum - 1) && index < this.pageSize * this.currentPageNum
//				})
			},
			total() {
				return this.showData.length;
			}
		},
		data() {

			const item = {
					"orderInfo":{
						"sendername":'王',
						"sendermobile":'12345678910',
						"sendaddr":'福建省福州市',
						"consigndate":'2018-4-17',
						"wanttime":'2018-4-18',
						"consignee":'李大头',
						"conaddr":'福建省泉州市',
						"conmobile":'18888888888',
						"amount":'1',
						"weight":'3',
						"name":'iphone8',
						"length":'',
						"width":'',
						"height":'',
						"description":'快速送达',
					},
					"formPickup":'',
					"tel":15056654
				};
			return {
				address:'',
				num1:1,
				tableData: Array(20).fill(item),
				showData: [],
				addData: {
					"sendername":'',
					"sendermobile":'',
					"sendaddr":'',
					"consigndate":'',
					"wanttime":'',
					"consignee":'',
					"conaddr":'',
					"conmobile":'',
					"amount":'',
					"weight":'',
					"name":'',
					"length":'',
					"width":'',
					"height":'',
					"description":'',
					"formPickup":'1',
				},
				rules: {
					sendername:[
						{ required: true, message: '请输入寄件人', trigger: 'blur' },
            			{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					],
					sendermobile:[
						{ required: true, message: '请输入手机号', trigger: 'blur' },
            			{ min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' }
					],
					sendaddr:[
						{ required: true, message: '请输入详细地址', trigger: 'blur' }
					],
					 consigndate: [
						{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
					],
					wanttime:[
						{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
					],
					consignee:[
						{ required: true, message: '请输入收件人', trigger: 'blur' },
            			{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					],
					conmobile:[
						{ required: true, message: '请输入手机号', trigger: 'blur' },
            			{ min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' }
					],
					conaddr:[
						{ required: true, message: '请输入详细地址', trigger: 'blur' }
					],
					weight:[
						{ required: true, message: '请输入重量', trigger: 'blur' },
            			{ min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					name:[
						{ required: true, message: '请输入货物名称', trigger: 'blur' }
					],
					length:[
						{ required: true, message: '请输入长度', trigger: 'blur' },
						{min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					width:[
						{ required: true, message: '请输入宽度', trigger: 'blur' },
						{min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					height:[
						{ required: true, message: '请输入高度', trigger: 'blur' },
						{min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					description:[
						{ required: true, message: '请输入货物相关描述', trigger: 'blur' }
					],
				},
						
		pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        currentPageNum:1,
        pageSize:10,
		sendaddress:'',
		conaddress:''
      }
    },
	created: function () {
		 this.getData();
	},
    methods:{
    	submitForm(formName) {
				// console.log(this.$refs[formName][0]);
				var result=this.addData;
				var userId=localStorage.getItem("userId") || "";
				// console.log(this.addData.beginaddr)
				this.alertError(this.addData.consigndate&&this.sendaddress&&this.conaddress&&this.addData.wanttime);
				this.$refs.add.validate((valid) => {
					if(valid) {
						this.$http.post('http://172.168.1.10:8080/api/order/saveOrderinfo',{
							senderinfo:userId,
							currstatus:100,
							sendername:result.sendername,
							sendermobile:result.sendermobile,
							sendaddr:result.sendaddr,
							beginaddr:this.sendaddress,
							consigndate:result.consigndate,
							wanttime:result.wanttime,
							consignee:result.consignee,
							conaddr:result.conaddr,
							endaddr:this.conaddress,
							conmobile:result.conmobile,
							amount:result.amount,
							weight:result.weight,
							name:result.name,
							pickup:result.formPickup,
							length:result.length,
							width:result.width,
							height:result.height,
							description:result.description,
						}).then(res=>{
							console.log(res)
							this.getData()
							this.closeForm()
							this.resetForm()
						})	
						// console.log(' submit!!');
					} else {
						console.log('error submit!!');

					}
				});
			},
			sendAddress(context){
				var address=context.province.value+context.city.value+context.area.value
				this.sendaddress=address;
			},
			conAddress(context){
				var address=context.province.value+context.city.value+context.area.value
				this.conaddress=address;
			},
			resetForm (formName) {
				this.$refs.add.resetFields();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPageNum = val;
				console.log(`当前页: ${val}`);
			},
			changeFontPlace(){
				this.$nextTick(()=>{

					var popover=document.querySelectorAll(".el-popover");
					popover.forEach((value,index)=>{
						value.style.height="80%";
						value.style.overflowY="scroll";
						value.style.overflowX="hidden";
						value.style.display='none'
					})
				
			})
			},
			getData(){
				var userId=localStorage.getItem("userId") || "";
				// console.log(userId)
				// 获取寄件人信息
				this.$http.post('http://172.168.1.10:8080/api/order/orderList', {curruser: userId,
				curruserrole: 2,
				senderinfo: userId})
				.then((res) => {
					// console.log(res.data.code)
				if (res.data.code == 'SUCCESS') {
						
					if(res.data.data.length!=0){
						console.log(res.data.data.data)	
						res.data.data.data.forEach((value,index)=>{
							value.pickup=(value.pickup === 2) ? '配送' : '自提';
						})
						this.showData=res.data.data.data ;
						// console.log("this.data"+	this.showData)
						// console.log(this.showData)
					}
					
					
					// this.formSendername = this.orderinfo.sendername
					// this.formSendermobile = this.orderinfo.sendermobile
					 this.showData.formPickup = (this.pickup === 2) ? '配送' : '自提'
					}
				})
				.catch(function (res) {
					console.log(res)
				})
			},
			alertError(m){
				if(m==''){
					alert('您的表单填写不完整！')
				}
			},
			closeForm(){
					this.$nextTick(()=>{
					var popover=document.querySelectorAll(".el-popover");
					popover.forEach((value,index)=>{
						value.style.display='none'
					})
				
			})
			},
			changeStyle(){
				var elIcon=document.getElementsByClassName('el-icon-circle-close-outline')[0]
				elIcon.style.fontSize='30px'
			}
			
		},
		mounted(){
			this.changeFontPlace();
			this.changeStyle()
		}
	}
</script>

<style>
	#app {
		font-family: Helvetica, sans-serif;
		text-align: center;
	}
	
	.el-header {
		background: #1c81e5;
		color: #FFF;
	
	}
	
	.container{height: 100%; border: 1px solid #eee;}
	.container h1{ margin:18px;font-size: 30px; text-shadow: 5px 5px 5px gainsboro;}
	.header {
		width: 100%;
		text-align: right;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
		position: relative;
		background: url(assets/a.jpg) no-repeat;
		/*background-size: ;*/
	}
	
	.header .mes {
		height: 100%;
		margin: 0;
		position: absolute;
		left: 50px;
		font-size: 18px;
		line-height: 55px;
	}
	
	.el-aside {
		color: #333;
	}
	
	.add {
		width: 100px;
		position: absolute;
		right:10%;
		height: 40px;
		line-height: 0;
	}
	
	.nameImg {
		border-radius: 50%;
		height: 80%;
		/*position: absolute;
		right: 60px;
		top: 50%;
		transform: translate(0,-40%);*/
	}
	.section{width: 85%; margin: 0 auto; overflow-y: hidden;}
	.alertBox{height: 800px; overflow-y: scroll;}
	.relative{position: relative;height: 40px;    padding: 8px;}
	.block{margin-top: 15px;}
</style>       